<template>
  <el-row :gutter="10">
    <el-col :span="16">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="bookId" label="预定序号"/>
        <el-table-column prop="customerName" label="乘客姓名"/>
        <el-table-column prop="bookTime" label="预定日期"/>
        <el-table-column prop="cityFrom" label="出发城市"/>
        <el-table-column prop="cityTo" label="抵达城市"/>
        <el-table-column prop="bookStatus" label="预定状态">
          <template #default="scope">
            {{ scope.row.bookStatus === "1" ? "✅" : "❌" }}
          </template>
        </el-table-column>
        <el-table-column prop="accomType" label="舱位类型"/>
        <el-table-column label="操作行为" fixed="right" width="180">
          <template #default="scope">
            <el-button size="small" type="primary">
              更改
            </el-button>
            <el-button size="small" type="danger">
              退订
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>

    <el-col :span="8" style="background-color: aliceblue;">
      <div style="height: 92vh;overflow: scroll">
        <el-timeline style="max-width: 100%">
          <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :hollow="activity.hollow"
              :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
      <div id="container">
        <div id="chat">
          <el-input
              v-model="msg"
              :rows="2"
              type="textarea"
              placeholder="Please input"
              @keydown.enter="sendMsg();"
          />
          <el-button @click="sendMsg()">发送</el-button>
        </div>
      </div>
    </el-col>
  </el-row>

</template>
<script lang="ts">
import {MoreFilled} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import axios from 'axios' //引入axios

export default {
  setup() {
    const activities = ref([
      {
        content: '⭐ 您好，我是禾优航空预定助手 ✈ ！热诚为您服务！',
        timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
        color: '#0bbd87',
      },
    ]);
    const msg = ref('');
    const tableData = ref([]);
    let count = 2;
    let eventSource;

    const sendMsg = () => {
      if (eventSource) {
        eventSource.close();
      }
      activities.value.push(
          {
            content: `你:${msg.value}`,
            timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
            size: 'large',
            type: 'primary',
            icon: MoreFilled,
          },
      );

      activities.value.push(
          {
            content: 'waiting...',
            timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
            color: '#0bbd87',
          },
      );

      // sse: 服务端推送 Server-Sent Events
      eventSource = new EventSource(`http://localhost:9090/api/ticket/stream/chat?message=${msg.value}`);
      msg.value = '';
      eventSource.onmessage = (event) => {
        if (event.data === '[complete]') {
          count = count + 2;
          eventSource.close();
          getBookings();  // 每次对话完后刷新列表
          return;
        }
        activities.value[count].content += event.data;
      };
      eventSource.onopen = (event) => {
        activities.value[count].content = '';
      };
    };

    const getBookings = () => {
      axios.get('http://localhost:9090/api/ticket/book')
          .then((response) => {
            tableData.value = response.data;
          })
          .catch((error) => {
            console.error(error);
          });
    };

    // Use onMounted to call getBookings when the component is mounted
    onMounted(() => {
      getBookings();
    });

    return {
      activities,
      msg,
      tableData,
      sendMsg,
      getBookings,
    };
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

#chat button {
  position: absolute;
  margin-left: -60px;
  margin-top: 21px;
}
</style>
